<template>
  <vue-modal
    @submitData="saveConfig"
    modalTitle="配置轮播图显示信息"
    modalName="configModal"
    modalWidth="400"
    ref="configModal">
    <div slot="content" class="config-box">
      <div class="config-box-in">
        <el-form ref="form" :model="form" label-width="80px">
          <div class="config-item">
            <h3>图片显示数量</h3>
            <el-select v-model="form.maxNum" class="num-select" size="small">
              <el-option value="3">3</el-option>
              <el-option value="5">5</el-option>
              <el-option value="7">7</el-option>
              <el-option value="9">9</el-option>
            </el-select>
            <span class="tip">前台显示轮播图的数量，如果启用的轮播图多于这个数量，那么在前台也只会显示最近修改的这个数量的图片</span>
          </div>
          <div class="config-item">
          <h3>图片显示间隔</h3>
          <el-input class="interval-input" v-model="form.interval" maxLength="5" size="small"></el-input>
          <span class="tip">前台轮播图播放间隔，单位毫秒，最小值3000，最大值10000，默认值5000</span>
        </div>
        </el-form>
      </div>
    </div>
  </vue-modal>
</template>

<script>

  import VueModal from 'components/common/modal/VueModal'

  import {saveConfig, getConfigByKey} from "../../../network/viewsRequest/carousel";
  import {MAX_NUM_KEY, INTERVAL_KEY} from "../../../common/const";

  export default {
    name: "ConfigTemplate",
    data() {
      return {
        form: {
          maxNum: 5,
          interval: 5000,
        }
      }
    },
    components: {
      VueModal
    },
    methods: {
      /**
       * 保存配置信息
       */
      saveConfig() {
        // 1.校验信息
        if (isNaN(this.form.interval)) {
          this.$message({
            type: 'error',
            message: '您输入的间隔时间有误，请核对'
          });
          return;
        }
        if (this.form.interval > 10000 || this.form.interval < 3000) {
          this.$message({
            type: 'error',
            message: '您输入的间隔时间有误，请核对'
          });
          return;
        }
        saveConfig(this.form).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '配置成功'
            });
            this.$refs.configModal.closeModal();
            // this.$emit("reloadTable");
          }
        })
      },
      /**
       * 显示模态框
       */
      show() {
        this.$refs.configModal.show();
      },
      /**
       * 从远程获取间隔信息
       */
      getIntervalFromDb() {
        getConfigByKey(INTERVAL_KEY).then(res => {
          this.form.interval = res.data;
        })
      },
      /**
       * 从远程获取最大显示图片数
       */
      getMaxNumFromDb() {
        getConfigByKey(MAX_NUM_KEY).then(res => {
          this.form.maxNum = res.data;
        })
      },
    },
    mounted() {
      // 1.获取间隔时间
      this.getIntervalFromDb();
      // 2.获取最大显示的数量
      this.getMaxNumFromDb();
    }
  }
</script>

<style scoped>
  .config-box {
    width: 100%;
    height: 100%;
  }
  .config-box-in {
    width: 80%;
    height: 80%;
    margin: 0 auto;
  }
  .config-item {
    margin-bottom: 20px;
  }
  h3 {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
  }
  .num-select {
    width: 100px;
  }
  .interval-input {
    width: 100px;
  }
  .tip {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #F56C6C
  }
</style>